<template>
  <div class="Search_tips">
      <h3>搜索“{{search_value}}”</h3>
      <ul>
          <li v-for="(item,index) in search_tips" :key="index" @click="$emit('getData',item.name)">
              <i></i>
              <p>{{item.name}}-{{item.artists[0].name}}</p>
          </li>
      </ul>
      <Loading v-if="search_tips == 0"></Loading>
  </div>
</template>

<script>
import Loading from "@/components/Loading.vue"
export default {
  name: "Search_tips",
  props:{
      search_value:String,
      search_tips:{
          type:Array,
          default:function(){
              return []
          }
      }
  },
  data(){
      return{
          Loading,
      }
  },
  components:{
      Loading
  }
};
</script>
<style lang="less" scoped>
    .Search_tips {
        h3 {
            margin-left: 10px;
            padding-right: 10px;
            height: 50px;
            line-height: 50px;
            font-size: 15px;
            color: #507daf;
            font-weight: 400;
            border-bottom: 1px solid rgba(0, 0, 0, .1);

            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: normal;
        }
        ul {
            li {
                display: flex;
                height: 45px;
                justify-content: center;
                align-items: center;
                padding-left: 10px;
                i {
                    width: 15px;
                    height: 15px;
                    margin-right: 7px;
                    background: url() no-repeat;
                    background-size: 15px;
                }
                p {
                    flex: 1;
                    padding-right: 10px;
                    line-height: 45px;
                    font-size: 15px;
                    color: #333;
                    border-bottom: 1px solid rgba(0, 0, 0, .1);

                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    word-break: normal;
                }
            }
        }
    }
</style>